<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>echarts全国热点活跃地区地图代码 </title>
</head>
<link rel="stylesheet" href="./css/main.css">

<body style="background: #000">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:950px"></div>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=wvGuSDMA4xjj0t1dPqEtibPvXY5gyN4U"></script>
    <!-- ECharts单文件引入 -->
    <script src="./js/echarts.js"></script>
    <script src="./js/chinaMap.js"></script>
    <script src="./js/BmapLib.js"></script>
    <script src="./js/data.js"></script>
    <script>
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/map'
            ],
            function(ec) {
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    backgroundColor: '#000',
                    color: [
                        'rgba(255, 255, 255, 0.8)',
                        'rgba(14, 241, 242, 0.8)',
                        'rgba(37, 140, 249, 0.8)'
                    ],
                    title: {
                        text: '最高访客量',
                        subtext: '历史最高访客量：230987643',
                        x: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['强', '中', '弱'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    toolbox: {
                        show: false
                    },
                    series: [{
                            name: '弱',
                            type: 'map',
                            mapType: 'china',
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(100,149,237,1)',
                                    borderWidth: 1.5,
                                    areaStyle: {
                                        color: '#1b1b1b'
                                    }
                                }
                            },
                            data: [],
                            markPoint: {
                                symbolSize: 2,
                                large: true,
                                effect: {
                                    show: true
                                },
                                data: (function() {
                                    var data = [];
                                    var len = 3000;
                                    var geoCoord
                                    while (len--) {
                                        geoCoord = placeList[len % placeList.length].geoCoord;
                                        var x = geoCoord[0] + Math.random() * 1 - 0.5;
                                        var y = geoCoord[1] + Math.random() * 2 - 0;
                                        if (ptInPolygon(x, y)) {
                                            data.push({
                                                name: placeList[len % placeList.length].name + len,
                                                value: 50,
                                                geoCoord: [
                                                    x,
                                                    y
                                                ]
                                            })
                                        }
                                    }
                                    return data;
                                })()
                            }
                        },
                        {
                            name: '中',
                            type: 'map',
                            mapType: 'china',
                            data: [],
                            markPoint: {
                                symbolSize: 3,
                                large: true,
                                effect: {
                                    show: true
                                },
                                data: (function() {
                                    var data = [];
                                    var len = 1000;
                                    var geoCoord
                                    while (len--) {
                                        geoCoord = placeList[len % placeList.length].geoCoord;
                                        var x = geoCoord[0] + Math.random() * 5 - 2.5;
                                        var y = geoCoord[1] + Math.random() * 3 - 1.5;
                                        if (ptInPolygon(x, y)) {
                                            data.push({
                                                name: placeList[len % placeList.length].name + len,
                                                value: 50,
                                                geoCoord: [
                                                    x,
                                                    y
                                                ]
                                            })
                                        }
                                    }
                                    return data;
                                })()
                            }
                        },
                        {
                            name: '强',
                            type: 'map',
                            mapType: 'china',
                            hoverable: false,
                            roam: true,
                            data: [],
                            markPoint: {
                                symbol: 'diamond',
                                symbolSize: 6,
                                large: true,
                                effect: {
                                    show: true
                                },
                                data: (function() {
                                    var data = [];
                                    var len = placeList.length;
                                    while (len--) {
                                        data.push({
                                            name: placeList[len].name,
                                            value: 90,
                                            geoCoord: placeList[len].geoCoord
                                        })
                                    }
                                    return data;
                                })()
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        );

        //判断点在多边形内还是外
        function ptInPolygon(lng, lat) {
            var pts = CreateChinaMapLine();

            var ply = new BMap.Polygon(pts);

            var pt = new BMap.Point(lng, lat);

            var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);

            if (result == true) {
                return true;
            } else {
                return false;
            }
        }
    </script>

</body>